<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>壁纸详细页面</title>
    <link rel="stylesheet" href="../style/imgDetil.css" />
  </head>
  <body>
    <div class="content">
      <!-- 左侧导航栏 -->
      <div class="leftNav">
        <!-- 左侧TOP -->
        <div class="leftNavTop">
          <!-- logo 加标题 -->
          <div class="leftNav-title">
            <img src="../static/img/logo/画板 1.png" alt="" />
            <span class="leftNav-title-text">即时视频</span>
          </div>
          <!-- 搜索框 -->
          <div class="TopSearch">
            <input type="text" placeholder="南航开通海口往返青岛" />
            <div class="SerchBtn">
              <img src="../static/img/搜索.png" alt="" />
              <span>搜索</span>
            </div>
          </div>
        </div>
        <!-- 壁纸详情区域 -->
        <div class="imgDetil">
          <ul class="imgList">
            <li class="imgItem">
              <img src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg" alt="">
            </li>
            <li class="imgItem">
              <img src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg" alt="">
            </li>
            <li class="imgItem">
              <img src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg" alt="">
            </li>
          </ul>
        </div>
         <!-- 分页器 -->
        <div class="paging">
          <div class="pagingHome">首章</div>
          <div class="pagingList">
            <ul>
              <li class="pagingItem active">1</li>
              <li class="pagingItem">2</li>
              <li class="pagingItem">3</li>
              <li class="pagingItem">4</li>
              <li class="pagingItem">5</li>
              <li class="pagingItem">6</li>
              <li class="pagingItem">7</li>
            </ul>
          </div>
          <div class="pagingEnd">下一章</div>
        </div>

        <!-- 底部 -->
        <div class="footer">
          <div class="footerLeft">
            <div class="footerTop">友情连接</div>
            <ul class="footerList">
              <li class="footerItem">
                <a href="#">即时网</a>
              </li>
              <li class="footerItem">
                <a href="#">即时影视模板</a>
              </li>
              <li class="footerItem">
                <a href="#">即时主题设计</a>
              </li>
              <li class="footerItem">
                <a href="#">大虾壁纸</a>
              </li>
            </ul>
          </div>
          <div class="footerRight">
            <div class="footerTop">合作联系</div>
            <ul class="footerList">
              <li class="footerItem">
                <a href="#">QQ: 2336558626</a>
              </li>
              <li class="footerItem">
                <a href="#">邮箱: 2336558626qq.com</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 商标 -->
        <div class="trademark">© 2023 JISHI - All Rights Reserved</div>
      </div>
      <!-- 右侧内容 -->
      <div class="rightContent">
        <!-- 右侧顶部导航栏 -->
        <div class="rightTopNav">
          <div class="TopNav">
            <ul>
              <li>
                <a href="#">
                  <img src="../static/img/钻石.png" alt="" />
                  <span>会员</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="../static/img/收藏文件.png" alt="" />
                  <span>收藏</span>
                </a>
              </li>
              <li class="userName">
                <a href="#">
                  <svg
                    t="1717161226654"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5473"
                    width="128"
                    height="128"
                  >
                    <path
                      d="M502.496 63.136c125.888 0 227.936 100.384 227.936 224.192 0 123.84-102.048 224.224-227.936 224.224-125.888 0-227.936-100.384-227.936-224.224C274.56 163.488 376.64 63.136 502.496 63.136L502.496 63.136zM502.496 63.136c125.888 0 227.936 100.384 227.936 224.192 0 123.84-102.048 224.224-227.936 224.224-125.888 0-227.936-100.384-227.936-224.224C274.56 163.488 376.64 63.136 502.496 63.136L502.496 63.136zM417.024 586.304l189.984 0c162.624 0 294.432 129.632 294.432 289.6l0 18.656c0 63.04-131.84 65.44-294.432 65.44l-189.984 0c-162.624 0-294.432-0.096-294.432-65.44l0-18.656C122.592 715.936 254.4 586.304 417.024 586.304L417.024 586.304zM417.024 586.304"
                      fill="#272636"
                      p-id="5474"
                    ></path>
                  </svg>
                  <span>admin</span>
                </a>
              </li>
            </ul>
            <!-- 登录按钮 -->
            <a href="#" class="loginBtn"> 登录 </a>
          </div>
        </div>
        <!-- 壁纸详情信息 -->
        <div class="imgDetilInfo">
          <div class="imgTitle">鞠婧祎壁纸</div>
          <div class="shouchang">
            <i class="unCollect">
               <svg t="1717232132663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5248" width="128" height="128"><path d="M512 205.6L596 376c12 24 34.4 40 60 44l188.8 27.2-136 133.6c-19.2 18.4-27.2 44.8-23.2 71.2l32 188-168-89.6c-11.2-6.4-24-8.8-37.6-8.8-12.8 0-25.6 3.2-37.6 8.8l-168.8 88.8 32-188c4.8-25.6-4-52.8-23.2-71.2l-136-132.8 188.8-27.2C393.6 416 416 400 428 376L512 205.6m0-124.8c-5.6 0-11.2 3.2-14.4 8.8L370.4 348c-2.4 4.8-7.2 8-12 8.8L73.6 398.4c-13.6 1.6-18.4 17.6-8.8 27.2l206.4 200.8c4 4 5.6 8.8 4.8 14.4l-48.8 284c-1.6 10.4 6.4 18.4 16 18.4 2.4 0 4.8-0.8 7.2-1.6L505.6 808c2.4-1.6 4.8-1.6 7.2-1.6s4.8 0.8 7.2 1.6l255.2 133.6c2.4 1.6 4.8 1.6 7.2 1.6 9.6 0 17.6-8 16-18.4l-48.8-284c-0.8-4.8 0.8-10.4 4.8-14.4l206.4-200.8c9.6-9.6 4-25.6-8.8-27.2l-284.8-41.6c-5.6-0.8-9.6-4-12-8.8L526.4 89.6c-3.2-5.6-8.8-8.8-14.4-8.8z" p-id="5249" fill="#515151"></path></svg>
            </i>
            <i class="Collect">
              <svg t="1717232204906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5458" width="128" height="128"><path d="M902.211 410.358a31.766 31.766 0 0 0-25.644-21.62L644.34 354.994 540.485 144.561a31.765 31.765 0 0 0-56.971 0L379.659 354.995l-232.227 33.744a31.768 31.768 0 0 0-17.606 54.183l168.042 163.8-39.669 231.288a31.765 31.765 0 0 0 46.091 33.487L512 762.298l207.71 109.199c6.915 3.65 22.854 4.496 33.454-2.418 10.086-6.579 14.681-19.151 12.637-31.069l-39.669-231.288 168.041-163.8a31.765 31.765 0 0 0 8.038-32.564z" fill="#515151" p-id="5459"></path></svg>
            </i>
           
            <span>收藏</span>
          </div>
          <ul >
            <li class="id">ID编号:15352</li>
            <li class="dimension">尺寸: 2160x3840</li>
            <li class="type">格式:jpg</li>
            <li class="size">大小:2.327MB</li>
            <li class="time">上传时间:2024-01-04</li>
          </ul>
          <a href="#" class="downloadBtn">下载壁纸</a>
          <a href="#" class="downloadBtn shareBtn">分享壁纸</a>
        </div>

        <!-- 热门标签 -->
        <div class="table">
          <div class="tableTitle">
            <p>热门标签</p>
            <a href="#">
              更多 
              <svg t="1717233557460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6519" width="128" height="128"><path d="M704.412 512l-311.59799999999996-311.598-73.226 73.226L557.441 512 319.588 750.373l73.226 73.226L704.412 512z" p-id="6520" fill="#515151"></path></svg>
            </a>
          </div>
          <ul class="tableList">
            <li class="tableItem">明星美女</li>
            <li class="tableItem">鞠婧祎</li>
            <li class="tableItem">可爱萌宠</li>
            <li class="tableItem">狗狗</li>
            <li class="tableItem">小狗</li>
            <li class="tableItem">小兔子</li>
            <li class="tableItem">可爱鸭子</li>
            <li class="tableItem">大白鹅</li>
            <li class="tableItem">卡通图案</li>
            <li class="tableItem">装B壁纸</li>
            <li class="tableItem">可爱鸭子</li>
            <li class="tableItem">星球星空</li>
            <li class="tableItem">大自然美景</li>
            <li class="tableItem">植物</li>
            <li class="tableItem">插画</li>
            <li class="tableItem">个性</li>
            <li class="tableItem">唐装</li>
            <li class="tableItem">创意</li>
            <li class="tableItem">帅哥</li>
            <li class="tableItem">国风</li>
            <li class="tableItem">性感</li>
          </ul>
        </div>
        
      </div>
    </div>

    <script src="../js/imgDetil.js"></script>
     <script src="../js/Route.js"></script>
  </body>
</html>
